<!--
	开发者:宋成恩
	开发时间:2017-7-10
	修改时间:2017-7-10
	功能描述:上传图片的共有组件,
		可接受参数:config{
			type: '对应post.js中createUploadUrl的type值',
			width:'显示图片的宽',
			height:'显示图片的高',
			tip:'鼠标放上去显示信息',
		}
		defaultImageUrl:''//默认的图片,可以显示原本的图片信息
		parameter{}:需要携带的参数(除了签名)
		注册事件:sendUploadImageResponse()
			点击上传照片时注册的事件,事件参数为服务器返回的参数
 -->
<template>
  <div id="uploadImageCard" :style="{'width':width}">
    <div class="avatar-uploader-box" :style="{'width':width}">
      <el-tooltip placement="top" effect="light" :disabled="(uploadTip === undefined) || (uploadTip === '')">
        <div slot="content" v-html="uploadTip"></div>
        <el-upload :multiple="false" ref="upload" :action="uploadurl" :show-file-list="false"
                   :on-success="handleImageSuccess" :on-error="handleImageError" :before-upload="beforeImageUpload"
                   :on-change="changeImageUpload" :auto-upload="false">


          <img v-if="imageUrl" :src="imageUrl" class="avatar" :style="{'width':width,'height':height}">
          <i v-else class="el-icon-plus avatar-uploader-icon"
             :style="{'width':width,'height':height,'line-height':height}">选择照片</i>

        </el-upload>
      </el-tooltip>
    </div>
    <div class="avatar_upload-btn-box" :style="{'width':width}">
      <el-button class="avatar_upload-btn" type="primary" @click="uploadImageToService"> 上传照片</el-button>
    </div>
  </div>
</template>

<script>
  import { createUploadUrl, getImgFromServer } from '../../../src/assets/js/post.js'

  export default {
    name: 'uploadImageCard',
    props: ['config', 'parameter', 'defaultImageUrl'],
    data () {
      return {
        width: '178px',
        height: '220px',
        imageUrl: '',
        uploadurl: '',
        uploadTip: ''
      }
    },
    created () {
      if ('height' in this.config) {
        this.height = this.config.height
      }
      if ('width' in this.config) {
        this.width = this.config.width
      }
      this.getDefaultImageUrl()
      this.uploadTip = this.config.tip + '<br/><i style="color:red">* </i>图片大小不超过2M'
      this.uploadurl = createUploadUrl(this.config.type, this.parameter)
    },
    methods: {
      getDefaultImageUrl () {
        if (this.defaultImageUrl) {
          this.imageUrl = getImgFromServer('GET_AUTH_FILE', this.defaultImageUrl)
        }
      },
      handleImageSuccess (res, file) {
        this.$emit('sendUploadImageResponse', res)
      },
      handleImageError (err, file, fileList) {
        this.$message.error('上传失败！')
      },
      changeImageUpload (file) {
        this.imageUrl = URL.createObjectURL(file.raw)
      },
      beforeImageUpload (file) {
        const isJPG = file.type === 'image/jpeg'
        const isPng = file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isJPG && !isPng) {
          this.$message.error('上传图片只能是 JPG 格式!')
          return false
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!')
          return false
        }
        return true
      },
      uploadImageToService () {
        this.$refs.upload.submit()
      }
    },
    watch: {
      defaultImageUrl (val, oldVal) {
        if (val) {
          this.getDefaultImageUrl()
        }
      }
    }
  }
</script>

<style scoped>
  /*图片上传*/
  .avatar-uploader-box {
    background-color: #eaedf1;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader-box:hover {
    border-color: #20a0ff;
  }

  .avatar-uploader-icon {
    font-size: 1.8em;
    color: white;
    text-align: center;
  }

  .avatar {
    display: block;
  }

  .avatar_upload-btn-box {
    margin-top: 1em;
    text-align: center;
  }

  .avatar_upload-btn {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 2.5em;
    max-width: 178px;
  }
</style>
